<template>
	<view class="supplier">
		<u-navbar title="供应商" :border-bottom="false"></u-navbar>
		<view class="search_box">
			<u-search v-model="keyword" @custom="search" @search="search"></u-search>
		</view>
		<view class="waterfall">
			<view class="l">
				<view v-for="(item, index) in classification" :key="index" :class="active === index ? 'active item' : 'item'" @click="CliActive(index)">
					{{ item.genre_info.title }}
					<view class="btn" v-if="active === index"></view>
				</view>
			</view>
			<scroll-view class="r" scroll-y="true">
				<view v-if="list.length > 0">
					<view v-for="(item, index) in list" :key="index" class="item" @click="shoppingDetails(item.id)">
						<view class="img">
							<img :src="item.map_image" alt="" class="img_i" />
						</view>

						<view class="warp">
							<view class="name">{{ item.title }}</view>
							<view class="surplus">剩{{ item.sy_stock }}张</view>
							<view class="b">
								<view class="b_l">
									<view class="l1">供货价:￥{{ item.xj_sprice }}</view>
								</view>
								<view class="b_t2">
									<view class="b_itms b_itms2" @click.stop="CliSet(item.id)">选品</view>
								</view>
							</view>
						</view>
					</view>
					<view style="padding: 20rpx 0rpx; box-sizing: border-box">
						<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" :bg-color="'none'"></u-loadmore>
					</view>
				</view>
				<view v-else class="r_k">
					<view class="r_k_z">
						<img src="../../static/gb.png" alt="" />
						<view>该分类没有商品</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<u-popup v-model="show" mode="center" border-radius="14">
			<view class="pro_box">
				<view class="top">
					<view class="itm"></view>
					<view>商品设置</view>
					<view class="itm" @click="show = false"><u-icon name="close"></u-icon></view>
				</view>
				<view class="itms">
					<view>商品售价</view>
					<view class="itms_i"><input type="text" v-model="form.xj_sprice" placeholder="请输入商品售价" /></view>
					<view>元</view>
				</view>
				<view class="itms">
					<view>商品分佣</view>
					<view class="itms_i"><input type="text" v-model="form.xj_fengyong" placeholder="请输入商品分佣" /></view>
					<view>元</view>
				</view>
				<view class="itms">
					<view>商品上架</view>
					<view class="itms_i"><u-switch v-model="form.checked"></u-switch></view>
				</view>
				<view class="teccxt">请注意商品售价与商品分佣，以免照成亏损</view>
				<view class="bt" @click="submit">确认设置</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { getgoodsgenreall, hhrgoodslist, Selectgoods } from '../../libs/axios.js';
export default {
	data() {
		return {
			id: '',
			shopId: '',
			show: false,
			active: 0,
			classification: [],
			list: [],
			form: {
				checked: false
			},
			keyword: '',
			loadStatus: 'nomore',
			page_num: 1
		};
	},
	onLoad(option) {
		this.id = option.ouid;
		// this.getgetgoodsgenreall();
		// this.lower();
		this.getshopgoodslist();
	},
	methods: {
		shoppingDetails(id) {
			uni.navigateTo({
				url: '/pages/shoppingDetails2/shoppingDetails2?id=' + id
			});
		},
		CliActive(index) {
			this.active = index;
			this.loadStatus = 'nomore';
			this.page_num = 1;
			this.list = [];
			this.list = this.classification[this.active].goods_list;
		},
		search() {
			this.loadStatus = 'nomore';
			this.page_num = 1;
			this.list = [];
			this.classification = [];
			this.getshopgoodslist();
		},
		async getshopgoodslist() {
			let info = await hhrgoodslist({
				ouid: this.id,
				title: this.keyword
			});
			info.data.forEach((item) => {
				if (item.goods_list.length > 0) {
					this.classification.push(item);
				}
			});
			this.list = this.classification[this.active].goods_list;
		},
		async getgetgoodsgenreall() {
			let info = await getgoodsgenreall();
			info.data.forEach((item) => {
				this.classification.push(item);
			});
		},
		async lower() {
			if (this.loadStatus === 'nomore') {
				return false;
			} else {
				this.loadStatus = 'loading';
			}
			let option = {
				pageIndex: this.page_num,
				pageSize: 10,
				ouid: this.id,
				is_shelf: 1,
				genre_id: this.classification[this.active].id,
				title: this.keyword
			};
			let info = await shopgoodslist(option);
			info.data.list.forEach((item) => {
				this.list.push(item);
			});

			if (info.data.list.length === 10) {
				this.page_num += 1;
				this.loadStatus = 'loadmore';
			} else {
				this.loadStatus = 'nomore';
			}
		},
		async CliSet(id) {
			this.shopId = id;
			this.show = true;
		},
		async submit() {
			let info = await Selectgoods({
				goods_id: this.shopId,
				xj_sprice: this.form.xj_sprice,
				xj_fenyong: this.form.xj_fengyong,
				is_shelf: this.form.checked ? '1' : '0'
			});
			uni.showToast({
				title: info.message,
				icon: 'success',
				duration: 2000
			});
			setTimeout(() => {
				uni.navigateBack({
					delta: 1
				});
			}, 2000);
		}
	}
};
</script>

<style lang="scss">
.supplier {
	padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
	padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
	.search_box {
		margin: 0 28rpx;
		padding: 20rpx 0;
		background: #fff;
	}
	.waterfall {
		display: flex;
		.l {
			width: 25%;
			height: 75vh;
			overflow-y: scroll;
			.item {
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 30rpx;
				font-weight: 400;
				color: rgba(50, 50, 50, 1);
				box-sizing: border-box;
				position: relative;
				.btn {
					width: 6rpx;
					height: 28rpx;
					opacity: 1;
					border-radius: 0rpx 200rpx, 200rpx, 0rpx;
					background: rgba(255, 67, 73, 1);
					position: absolute;
					top: 36rpx;
					left: 0;
				}
			}
			.active {
				color: rgba(255, 67, 73, 1);
			}
		}
		.r {
			width: 75%;
			height: 75vh;
			overflow-y: scroll;
			.item {
				display: flex;
				padding: 20rpx 0;
				box-sizing: border-box;
				.img {
					width: 160rpx;
					height: 160rpx;
					border-radius: 10rpx;
					overflow: hidden;
					position: relative;
					.img_i {
						width: 100%;
						height: 100%;
					}
					.img_t {
						position: absolute;
						bottom: 0;
						right: 0;
						left: 0;
						background: rgba(0, 0, 0, 0.4);
						font-size: 24rpx;
						font-weight: 400;
						color: rgba(255, 255, 255, 1);
						text-align: center;
					}
				}
				.warp {
					width: 65%;
					height: 160rpx;
					position: relative;
					margin-left: 22rpx;
					.name {
						width: 100%;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						font-size: 28rpx;
						font-weight: 400;
						color: rgba(51, 51, 51, 1);
					}
					.surplus {
						font-size: 20rpx;
						font-weight: 400;
						color: rgba(119, 119, 119, 1);
						margin-top: 20rpx;
					}
					.b {
						position: absolute;
						left: 0;
						right: 0;
						bottom: 0;
						display: flex;
						justify-content: space-between;
						align-items: flex-end;
						.b_l {
							display: flex;
							justify-content: space-between;
							.l1 {
								font-size: 28rpx;
								font-weight: 400;
								color: rgba(238, 10, 36, 1);
							}
							.l2 {
								font-size: 24rpx;
								font-weight: 400;
								text-decoration-line: line-through;
								color: rgba(119, 119, 119, 1);
								margin-left: 8rpx;
							}
						}
						.b_t2 {
							.b_itms {
								width: 128rpx;
								height: 42rpx;
								border-radius: 10rpx;
								background: rgba(255, 67, 73, 1);
								font-size: 24rpx;
								font-weight: 400;
								color: rgba(255, 255, 255, 1);
								display: flex;
								justify-content: center;
								align-items: center;
							}
							.b_itms2 {
								margin-top: 10rpx;
							}
						}
						.r_img {
							width: 52rpx;
							height: 52rpx;
							background: rgba(255, 67, 73, 1);
							border-radius: 50%;
						}
					}
				}
			}
			.r_k {
				.r_k_z {
					font-size: 30rpx;
					font-weight: 400;
					color: rgba(119, 119, 119, 1);
					position: relative;
					top: 200rpx;
					left: 0;
					right: 0;
					text-align: center;
					img {
						width: 382rpx;
						height: 244rpx;
					}
				}
			}
		}
	}
	.pro_box {
		width: 640rpx;
		padding: 30rpx;
		.top {
			display: flex;
			justify-content: space-between;
			padding: 25rpx;
			.itm {
				width: 25%;
				text-align: right;
			}
		}
		.itms {
			margin: 20rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 80rpx;
			background: rgba(248, 248, 248, 1);
			font-size: 30rpx;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
			padding: 0 30rpx;

			.itms_i {
				width: 65%;
				margin: 0 0 0 10rpx;
				display: flex;
				justify-content: flex-end;
			}
		}
		.teccxt {
			margin-top: 30rpx;
			text-align: center;
			font-size: 30rpx;
			font-weight: 400;
			color: rgba(153, 153, 153, 1);
		}
		.bt {
			width: 570rpx;
			height: 80rpx;
			border-radius: 16rpx;
			background: rgba(255, 67, 73, 1);
			font-size: 30rpx;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 43rpx auto 0 auto;
		}
	}
}
</style>
